<template>
  <div>
    <a-tabs default-active-key="1" @change="callback" size="large">
      <a-tab-pane key="1" tab="我的培训">
        <div style="overflow: hidden">
          <div>
            <div
              class="listDiv2"
              @click="getJumptrainDetails()"
              v-for="list in 4"
              :key="list"
            >
              <div class="image1">
                <img src="" alt="" />
                <span v-if="mosgolor == 1" class="stateLabel">未开始</span>
                <span v-if="mosgolor == 2" class="stateLabel">已结束</span>
                <span v-if="mosgolor == 3" class="stateLabel">进行中</span>
              </div>
              <div>
                <span
                  class="titleTxt1"
                  style="font-weight: 600; margin-top: 6px"
                >
                  大厂算法面试真题解析32讲算法面试真题解...
                </span>
                <span class="timeTxt1" style="margin-top: 20px"
                  >培训时间：2021.10.23 - 11.11</span
                >
                <div class="cOicon-id" style="margin-top: 16px">
                  <img
                    class="imgagesOne"
                    src="@/assets/image/companyIcon1.png"
                    alt=""
                  />
                  <p>深圳市腾讯科技有限公司</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="50"
            show-less-items
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleList: [
        { name: "全部" },
        { name: "学历教育" },
        { name: "特殊教育" },
        { name: "职业技能教育" },
        { name: "艺术教育" },
        { name: "综合教育" },
      ],
      current: 1,
      mosgolor: 1,
    };
  },
  methods: {
    callback(key) {
      return key;
      console.log(key);
    },
  },
};
</script>


<style lang="less" scoped>
.listDiv2 {
  width: 100%;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  float: left;
  margin-left: 1px;
  margin-bottom: 24px;
  display: flex;
  cursor: pointer;
  .image1 {
    width: 217px;
    overflow: hidden;
    margin-right: 20px;
    position:relative;
    img {
      width: 217px;
      height: 150px;
    }
    span{
      padding: 4px 13px;
      background-color: #FFBE37;
      position: absolute;
      font-family: PingFang SC;
      color: #fff;
      top: 0;
      left: 0;
    }
  }
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  color: #333333;
  text-shadow: 0 0 0.25px currentColor;
  font-weight: 600;
}
</style>
